<template>
  <div class="info">
    <div class="hot">
      <div class="title">
        <span
          ><img src="../../../assets/images/9732351014585228543-22.png" alt=""
        /></span>
        <router-link to="/check">
          <a href="##"
            >查看更多<img
              src="../../../assets/images/箭头.png"
              width="15px"
              class="chaka"
              alt=""
          /></a>
        </router-link>
      </div>
      <ul class="hot-views">
        <li v-for="item in news" :key="item.id">
          <span>最新</span>
          <span style="margin-left: 6px">{{ item.title }}</span>
          <a :href="item.sourceUrl" class="newsifo"
            ><img
              src="../../../assets/images/灰箭头.png"
              width="15px"
              style="vertical-align: middle"
              alt=""
          /></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    news: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  .title {
    span {
      font-size: 17px;
      padding-left: 10px;
      height: 47px;
      line-height: 47px;
      img {
        width: 70px;
        margin-top: 11.5px;
      }
    }
    a {
      color: #6e8de9;
    }
    .chaka {
      position: relative;
      top: 2.5px;
    }
  }
  .hot {
    margin-top: 0.2rem;
    .hot-views {
      line-height: 35px;
      li > span:nth-child(1) {
        font-size: 11px;
        color: #fff;
        background-color: red;
        border-right: 2.5px solid red;
        border-left: 2.5px solid red;
        border-radius: 2.5px;
      }
      li > span:nth-child(2) {
        font-size: 14px;
        letter-spacing: 2px;
      }
      .newsifo {
        float: right;
      }
    }
  }
}
</style>
